<template>
	<view class="signin-center__-content">
		<view class="head-message">
			<view class="title">每日签到</view>
			<view class="message">已连续签到<text>{{8}}</text>天</view>
		</view>
		<view class="signin">
			<view class="head-title">
				<view class="iconfont iconleft" @tap="handelMonth('last')"></view>
				<view class="year-month">{{year}}&nbsp;&nbsp;年&nbsp;&nbsp;{{month}}&nbsp;&nbsp;月</view>
				<view class="iconfont iconright" @tap="handelMonth('next')"></view>
			</view>
			<view class="day-week">
				<view class="day-week-item">
					<view class="item week-item">日</view>
					<view class="item week-item">一</view>
					<view class="item week-item">二</view>
					<view class="item week-item">三</view>
					<view class="item week-item">四</view>
					<view class="item week-item">五</view>
					<view class="item week-item">六</view>
					<view class="item" v-for="val in dayList">
						<view class="day" :class="val.checked ?'active-day':''">{{val.val}}</view>
					</view>
				</view>
				<view class="signin-btn" @tap="handelSigin">签到</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				year: '',
				month: '',
				dayList: []
			}
		},
		onLoad() {
			let nowDate = new Date()
			this.year = nowDate.getFullYear()
			this.month = nowDate.getMonth() + 1
		},
		methods: {
			// 上下月
			handelMonth(type) {
				// 上一月
				if (type == 'last') {
					if (this.month == 1) {
						this.year -= 1
						this.month = 12
					} else {
						this.month -= 1
					}
				} else {
					// 下一月
					if (this.month == 12) {
						this.year +=
							this.month = 1
					} else {
						this.month += 1
					}
				}
			},
			// 是否为闰年
			checkYear(year) {
				let bol = false
				if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
					bol = true
				}
				return bol
			},
			// 当天签到
			handelSigin() {
				let time = new Date()
				this.dayList.forEach(val => {
					if (val.val == time.getDate()) {
						val.checked = true
						uni.showToast({
							title: '已签到',
							icon:'none'
						})
					}
				})
			}
		},
		watch: {
			month() {
				this.dayList = []
				let dayCount = new Date(this.year, this.month, 0).getDate()
				let tu = new Date(this.year + '-' + this.month + '-1').getDay()
				for (let i = 0; i < tu; i++) {
					this.dayList[i] = {
						val: '',
						checked: false
					}
				}
				for (let i = 1; i <= dayCount; i++) {
					let obj = {
						val: i,
						checked:false
					}
					this.dayList.push(obj)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.signin-center__-content {
		.head-message {
			widht: 100%;
			height: 100upx;
			background-color: #FFFFFF;
			box-sizing: border-box;
			border-bottom: 2upx solid #E7E7E7;
			border-top: 2upx solid #E7E7E7;
			display: flex;
			justify-content: space-between;
			padding: 0 30upx;

			view {
				line-height: 98upx;
				font-size: 28upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #000000;
				opacity: 1;
			}

			.message {
				color: #999999;

				text {
					color: #EAB868;
				}
			}
		}

		.signin {
			width: 100%;
			padding-bottom: 60upx;
			background-color: #FFFFFF;
			box-sizing: border-box;
		}

		.head-title {
			padding-top: 30upx;
			display: flex;
			justify-content: center;

			.iconfont {
				color: #999999;
				font-size: 24upx;
				line-height: 40upx;
			}

			.year-month {
				margin: 0 50upx;
				font-size: 28upx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #333333;
				line-height: 40upx;
				opacity: 1;
			}
		}

		.day-week {
			.day-week-item {
				display: flex;
				flex-wrap: wrap;

				.item {
					width: calc(100% / 7);
					margin-top: 50upx;
					text-align: center;
					font-size: 28upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					line-height: 40upx;
					color: #333333;
					opacity: 1;

					.day {
						width: 40upx;
						height: 40upx;
						line-height: 40upx;
						font-size: 28upx;
						text-align: center;
						margin: auto;
						border-radius: 20upx;
					}

					.active-day {
						color: #FFFFFF;
						background-color: #EAB868;
					}
				}

				.week-item {
					color: #999999;
				}
			}

			.signin-btn {
				width: 200upx;
				height: 70upx;
				line-height: 70upx;
				text-align: center;
				color: #FFFFFF;
				background-color: #EAB868;
				font-size: 28upx;
				border-radius: 35upx;
				margin: auto;
				margin-top: 60upx;
			}
		}
	}
</style>
